<template>
    <SysDialog :title="dialog.title" v-model="dialog.visible" @on-close="onClose" @on-confirm="commit">
        <template v-slot:content>
            <div style="height: 330px;width: 520px;">
                <lay-row space="10">
                    <lay-col sm="10">
                        <div class="grid-demo">
                            <lay-carousel v-model="active">
                                <lay-carousel-item :id="item.id" v-for="item in array">
                                    <div
                                        style="text-align: center;width:200px;height:260px;line-height:260px;background-color:#79C48C;">
                                        <img :src="item.imgUrl" style="width:200px;height:260px;" />
                                    </div>
                                </lay-carousel-item>
                            </lay-carousel>
                        </div>
                    </lay-col>
                    <lay-col sm="14">
                        <lay-container fluid>
                            <div class="container-demo">
                                书籍名称:<span style="margin-left:10px;font-weight: 600;font-size: 18px;">
                                    <<{{ bookName }}>>
                                </span>
                            </div>
                            <div class="container-demo">
                                作者:<span style="margin-left:10px;font-weight: 600;font-size: 18px;">{{ author }}</span>
                            </div>
                            <div class="container-demo">
                                出版社:<span style="margin-left:10px;font-weight: 600;font-size: 18px;"> {{ publisher
                                    }}</span>
                            </div>
                            <div class="container-demo">
                                出版时间:<span style="margin-left:10px;font-weight: 600;font-size: 18px;">{{ publicationDate
                                    }}</span>
                            </div>
                            <div class="container-demo">
                                价格:<span style="margin-left:10px;font-weight: 600;font-size: 18px;">{{ price }}</span>
                            </div>
                            <div class="container-demo">
                                ISBN码:<span style="margin-left:10px;font-weight: 600;font-size: 18px;">{{ isbncode
                                    }}</span>
                            </div>
                        </lay-container>
                    </lay-col>
                </lay-row>
            </div>
        </template>
    </SysDialog>
</template>

<script setup lang="ts">
import { BookParam } from '@/api/book/BookModel';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { getOneBookApi } from '@/api/book';
import { layer } from '@layui/layui-vue';
import { ref } from 'vue';
const { dialog, onClose, onShow } = useDialog()
//图书信息
const book = ref()
const bookName = ref('')
const author = ref('')
const publisher = ref('')
const bookImg = ref('')
const array = ref<{ id: number, imgUrl: string }[]>([])
const publicationDate = ref('')
const isbncode = ref('')
const price = ref('')
//轮播图
const active = ref(0)
function setActiveIndexById(id: number) {
    // 假设您根据id找到对应的索引并更新active
    const index = array.value.findIndex(item => item.id === id);
    if (index !== -1) {
        active.value = index;
    }
}
setActiveIndexById
const showInfo = async (row: BookParam) => {
    dialog.title = "图书信息"
    if (row) {
        let res = await getOneBookApi(row)
        if (res && res.code == 200) {
            book.value = res.data
            bookName.value = book.value.bookName
            author.value = book.value.author
            publisher.value = book.value.publisher
            bookImg.value = book.value.bookImg
            if (bookImg.value) {
                // 使用 split 根据逗号分隔字符串
                const imgUrls = bookImg.value.split(',');
                // 清空现有数组
                array.value = [];
                // 遍历分割后的 URL 字符串数组
                imgUrls.forEach((url, index) => {
                    // 为每个 URL 创建一个对象并添加到 array 中
                    array.value.push({
                        id: index, // 假设 ID 是基于索引
                        imgUrl: url
                    });
                });
            }
            publicationDate.value = book.value.publicationDate
            isbncode.value = book.value.isbncode
            price.value = book.value.price
            // console.log(array.value);
            layer.msg(res.message, {
                icon: 1,
                time: 1000,
            });
        }
        onShow()
    }
}
defineExpose({
    showInfo
})
const commit = () => {
    onClose()
}
</script>

<style scoped lang="scss">
.grid-demo {
    border-radius: 2px;
    text-align: center;
}

.container-demo {
    font-size: 16px;
    height: 40px;
    text-align: left;
    padding-left: 20px;
    margin-top: 10px;
}
</style>